《高性能網站建設指南》閱讀筆記_規則5- 將樣式放在頂部
發布時間:2013-11-22 瀏覽:367打印字號:大中小
首先書中提到了可視化反饋的重要性,一個很常見的例子就是進度指示器:
在我們這里,HTML頁面就相當于進度指示器,當瀏覽器逐步的加載頁面時,頁頭,導航欄等,所有這些為等待頁面的用戶提供視覺反饋。按照作者的意思:在IE中將樣式表放在底部,可能會導致白屏或者是無樣式內容的閃爍。白屏是由于瀏覽器要等待css下載完再顯示頁面的組件,所以在等待css下載的時候頁面就是白屏。無樣式的閃爍是由于先下載頁面的組件比如文字圖片,并逐步顯示,等css下載完則需要應用新的css樣式渲染,就產生了這種無樣式的閃爍現象。
Css在底部:http://stevesouders.com/hpws/css-bottom.php
Css在頂部:http://stevesouders.com/hpws/css-top.php
用@import方式:http://stevesouders.com/hpws/css-top-import.php
無樣式內容的閃爍:http://stevesouders.com/hpws/css-fouc.php
需要說明的一點是,不管樣式放在那里并不會影響加載頁面的時間,而影響的是瀏覽器對這些組件順序的反應,如下圖:
有些用戶感覺緩慢的頁面反而加載的更快,這就是視覺化反饋的重要性。如果真的產生了白屏,用戶就會因為不知道發生了什么而離開,去投奔競爭對手。